<script setup>
//变量的导入
import { ref ,reactive} from 'vue';
//axios的传入
import request  from "../axios/axios"
//路由的跳转工具
import {useRouter} from "vue-router"
//跳转路由
import { RouterLink } from 'vue-router';
//导入定义好的pinia数据
import {userInfoStore} from "../stores/UserInfoPinaStores.js"

let user= userInfoStore();//创建UserInfopinia数据


const routers=useRouter();

//发送数据
let uName=ref("");//用户名变量
let nameShow=ref("");//用户名提示框
let uPassword=ref("");//用户密码变量
let namePassword=ref("");//用户密码提示框
//创建路由跳转
async function send(){
    //req
  //get方法
  if(checkLogin()){
          console.log("正确，登录成功")
        let {data} =await request.get("/login",
        {
          params:{
            username:uName.value,
            userpassword:uPassword.value
          }
        }
        )

        
        console.log(data)
        if(data.statusCode==200){
          //这里是成功登录并且返回数据
            //把返回的数据设置到pinia中
            //修改pinia中的userId
           user.userId = data.data.userId;
           user.userName= data.data.userName;
           user.userXh = data.data.userXh;
           user.userPhone = data.data.userPhone;
           user.userSex = data.data.userSex;
           user.userStatus = data.data.userStatus;

         
          //根据用户的身份跳转
          if(user.userStatus=='0'){
            routers.push("/user")///跳转到登录界面
          }else if(user.userStatus=='1'){
            routers.push("/admin")///跳转到登录界面
          } 
        }else{
          alert(data.message)
        }
        
        

  }

}





//检查用户名
function checkUserName(){
    var usernameReg=/^[1-9a-zA-Z]{1}[0-9a-zA-Z]{4,15}$/;//用户名变量的判断
    if(usernameReg.test(uName.value)){
        //输用户名合法
        nameShow.value="OK";
        return true;
    }else{
        nameShow.value="用户名不合法";
        return false;
    }
}
//检查密码
function checkUserPwd(){
  //定义密码的正则表达式式
  var userPwdReg=/^[1-9a-zA-Z]{1}[0-9a-zA-Z]{5,15}$/
  if(userPwdReg.test(uPassword.value)){
    namePassword.value="OK";
    return true;
  }else{
    console.log(uPassword.value)
    namePassword.value="密码不合法";
    return false;
  }

}

//登录检查
function checkLogin(){
  
  if(checkUserName() && checkUserPwd()){
    return true;
  }
  return false;
}



</script>

<template>
    <div class="login">
      
      <div id="login_b">
              <div id="title"><br> <h2>用户登录</h2></div>  <!--  登录界面-->
              <div id="content"> 
                  <br>
                  <br>
                  <div class="inputUI">
                      用 户 名 : <input @blur="checkUserName()" type="text"   name="username"   class="inp"    id="inp_user" v-model="uName">
                                <span class="hint" id="hint_user" v-text="nameShow"></span>
                  </div>
                  <div class="inputUI">
                      用户密码: <input @blur="checkUserPwd()" type="password"  name="userpassword"  class="inp" id="inp_pwd" v-model="uPassword" />
                              <span  class="hint"  id="hint_pwd" v-text="namePassword"></span>
                  </div>
                  <div class="btnContent">
                      <button @click="send()" class="btnStyle">登录</button><br>
                      <button  class="btnStyle"><RouterLink to="regist" style="text-decoration: none; color: black;">去注册</RouterLink> </button>
                  </div>
              </div> 
      </div>
    </div>
</template>

<style scoped>
  @import "../public/css/login_css.css";
  .login{
    width: 100%;
    height: 100%;
    background-image: url(../public/img/body_bg.jpg);
    
    
  }
</style>
